<template>
	<Container>
		<view class="header">
			<view
				class="article"
				@tap="tap(item, index)"
				hover-class="touch"
				hover-stay-time="300"
				:class="{ error: chooses[index] === 'error', articleLight: chooses[index] === 'select' }"
				v-for="(item, index) in assignment.optionArticles"
				:key="index"
			>
				<image class="image" :src="item.imageUrl" mode="aspectFit"></image>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
			<image
				v-if="isPoint"
				class="pointTouch img"
				:class="{ pointAnimation: pointAnimation }"
				:style="{ left: pointTouch[pointCurrent].left, top: pointTouch[pointCurrent].top }"
				src="../../../static/pointTouch.png"
				mode="widthFix"
			></image>
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container },
	data() {
		return {
			pointCurrent: -1,
			pointTouch: [{ left: '35%', top: '40%' }, { left: '70%', top: '40%' }, { left: '35%', top: '80%' }, { left: '70%', top: '80%' }],
			isPoint: true,
			interval: null,
			pointAnimation: false
		}
	},
	watch: {
		questionPress: function(bool) {
			if (bool) {
				clearInterval(this.interval)
				this.pointCurrent = -1
				this.isPoint = true
			} else {
				let count = 0
				setTimeout(() => {
					this.touchAudio()
				}, 200)
				setTimeout(() => {
					this.pointAnimation = true
				}, 400)
				this.pointCurrent = this.assignment.optionArticles[count].serialIndex
				this.interval = setInterval(() => {
					if (count === this.assignment.optionArticles.length - 1) {
						clearInterval(this.interval)
						this.isPoint = false
						return
					}
					count++
					this.pointAnimation = false
					const timer1 = setTimeout(() => {
						this.touchAudio()
					}, 200)
					const timer2 = setTimeout(() => {
						this.pointAnimation = true
					}, 400)
					this.$once('hook:beforeDestory', function() {
						clearTimeout(timer1)
						clearTimeout(timer2)
					})
					this.pointCurrent = this.assignment.optionArticles[count].serialIndex
				}, 1800)
			}
		}
	},
	methods: {
		tap: function(item, index) {
			this.touchAudio()
			if (this.isPoint) return
			if (this.isComplete) return
			if (this.choosesKey.indexOf(index) > -1) return
			this.optionStatus('select', index)
			this.choosesKey.push(index)
			if (this.choosesKey.length === this.assignment.optionArticles.length) {
				const number = this.assignment.optionArticles.map(item => {
					return item.serialIndex
				})
				const bool = this.choosesKey.join('') === number.join('')
				if (!bool) {
					this.choosesKey.map((item, index) => {
						this.optionStatus('error', index)
					})
				}
				this.$parent.next({
					isSure: bool
				})
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	flex-wrap wrap
	align-content center
	position relative
	perspective 2000
	.article
		width 50%
		height 40%
		display flex
		justify-content center
		align-items center
		position relative
		transition all 0.3s
		.image
			width 80%
			height 80%
	.pointTouch
		position absolute
		width 80rpx
		top 130%
		left 45%
		transition all 0.4s
.pointAnimation
	animation pointAnimation 0.5s
@keyframes pointAnimation
	0%
		transform translate3d(0, 0, 0)
	50%
		transform translate3d(0, 0, 200rpx)
	100%
		transform translate3d(0, 0, 0)
</style>
